<!--
 * @Author: WangLong
 * @Date: 2024-01-29 09:23:51
 * @LastEditTime: 2024-02-23 16:42:07
 * @LastEditors: WangLong
 * @Description: 
 * @FilePath: \front_erp\src\views\stock\returnApply\dtl.vue
-->
<template>
  <div v-loading="detailInfoShow">
    <div class="requestAdd">

      <div class="search-button">
        <template >
         
        </template>
        </div>
      <!-- 内容信息 -->
      <el-tabs type="border-card">
        <el-tab-pane label="产品评估信息">
          <productEstimateAdd
            ref="productLibraryAddRef"
            v-model:productLibraryAddShow="productLibraryAddShow"
            :pageType="pageType"
            :FormTemplate="detailFormTemplate"
          />
        </el-tab-pane>
     

        <el-tab-pane label="审批进度" name="approval">
        <template v-if="auditList.length">
          <div class="contact-info" id="print-iframe">
            <!-- 步骤栏 -->
            <div :class="printFlag ? 'steps-print-box' : 'steps-box'">
              <el-steps
                :class="flowInfoList.length > 7 ? 'BigSteps' : 'SmallSteps'"
                :active="flowingStep"
                finish-status="success"
              >
                <el-step v-for="(item, index) in flowInfoList" :key="index">
                  <template #title>
                    <span :title="item.name">
                      {{ item.name }}
                    </span>
                  </template>
                  <template #description>
                    <div>
                      <p class="ription">{{ item.auditDate }}</p>
                      <p class="ription">{{ item.auditEmp }}</p>
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
            <!-- 表格数据 -->
            <el-table
              :data="auditList"
              border
              :height="'100%'"
              :header-cell-style="{ 'text-align': 'center' }"
              sum-text=""
            >
              <!-- 操作模式 -->
              <el-table-column label="流程节点" prop="name" min-width="120">
              </el-table-column>
              <el-table-column
                label="审核人"
                prop="createUserName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核时间"
                prop="createTime"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核意见"
                prop="resultName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column label="审核备注" prop="remark" min-width="120">
              </el-table-column>
            </el-table>
          </div>
          <!-- 评论 -->
        
        </template>

        <div v-else>暂无审核</div>
      </el-tab-pane>
      </el-tabs>
    </div>
    <div class="search-button">

 
      <el-button class="btn direction" @click="handleBack()"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon
        >返回</el-button
      >
    </div>

    <el-dialog
      :title="title"
      v-model="auditDialogShow"
      width="600px"
      append-to-body
    >
      <el-form-item label="审核备注：" label-width="90">
        <el-input
          style="width: 100%"
          v-model="auditRemark"
          placeholder=""
          type="textarea"
          maxlength="2000"
          clearable
        />
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            style="color: #fff; background-color: rgba(67, 207, 124, 1)"
            v-if="auditResult == 3"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >同意</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 4"
            @click="saveCheck()"
            v-loading="loadingCheck"
            >拒绝</el-button
          >
          <el-button
            style="color: #fff; background-color: rgba(245, 108, 108, 1)"
            v-if="auditResult == 6"
            @click="saveCheck()"
            v-loading="loadingCheck"
          >
            驳回</el-button
          >
          <el-button style="background-color: #fff" @click="closeAudit()"
            >取 消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import productEstimateAdd from "./productEstimateAdd.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getcheckproductdetailApi,selectAuditList } from "@/api/operation/productEstimate.js";
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 路由
const route = useRoute();
const emit = defineEmits([
  // 刷新父组件表格数据
  "refreshList",
]);
// 详情加载效果
const detailInfoShow = ref(false);

// 新增组件显隐
const productLibraryAddShow = ref(false);
// 新增维修显隐
const ServiceAddShow = ref(true);

const flowInfoList = ref([]);
//当前进度
const flowingStep = ref(0);


const loadingCheck = ref(false);
// 选择审核
const auditDialogShow = ref(false);

// 退库表单数据模板
const requestFormTemplate = {};

let auditList = ref([]);

//详情数据
let detailFormTemplate = ref({});
const data = reactive({
  // 客户表单
  requestForm: JSON.parse(JSON.stringify(requestFormTemplate)),
  auditRemark: "",
  auditResult: "",
  applyId: "",
});


const {
  auditRemark,
  auditResult,
  applyId,
} = toRefs(data);


const handleCheckBtn2 = (requestFormRef, type, title) => {
  auditRemark.value = "";
  if (type == 3) {
    auditRemark.value = "同意";
  }

  auditResult.value = type;
  (applyId.value = requestForm.value.stockReturnId),
    (auditDialogShow.value = true);
  loadingCheck.value = false;
};



const saveCheck = async () => {
  
};


// 工单列表
const projectList = ref([]);
// 表格加载效果
const loading = ref(false);
/**
 * @description: 返回
 */
const handleBack = (val) => {
  emit("update:ProductLibrarydetailShow", false);
  emit("refreshList", false);
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  let res = null;
  try {
    detailInfoShow.value = true;
    res = await getcheckproductdetailApi(id);
    detailFormTemplate.value = res.data;
    detailInfoShow.value = false;

    const resAudit = await selectAuditList(id);
    auditList.value = resAudit.data;
    if (resAudit.data.length) {
      flowInfoList.value = resAudit.data[0].chartVo.flowList;
      flowingStep.value = resAudit.data[0].chartVo.flowingStep;
    }

  } catch (error) {
    detailInfoShow.value = false;
  }
  return res;
};

defineExpose({
  handleDetailInfo,
});

onMounted(() => {});
</script>

<style lang="scss" scoped>
.requestAdd {
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  .request-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
    .table-operate {
      cursor: pointer;
      .el-button {
        height: 28px;
      }
    }
  }

  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .search-input {
    width: 268px;
    height: 34px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
.auto-top {
  width: 100%;
  position: absolute;
  top: 0px;
  display: flex;
  font-weight: bold;
}
.auto-item {
  width: 125px;
  text-align: center;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.el-autocomplete .el-autocomplete-suggestion {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}
</style>
